<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="rules"  :model="form" label-width="120px">
      <el-form-item label="开始时间"  prop="date1">
        <el-date-picker
          v-model="form.date1"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="结束时间" prop="date2">
        <el-date-picker
          v-model="form.date2"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.contents" type="textarea" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改</el-button>
<!--        <el-button @click="onCancel">取消</el-button>-->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {getActivity,updateActivity} from '@/api/activity'
export default {
  data() {
    return {
      form: {
        date1: '',
        date2: '',
        contents: ''
      },
      rules: {
        date1: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
        date2: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }]
      },
    }
  },
  created() {
    //获取数据
    this.getActivity()
  },
  methods: {
    onSubmit() {

      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          updateActivity(this.form).then((res) => {
            if (res.status==200){
              this.$notify({
                title: 'Success',
                message: res.msg,
                type: 'success',
                duration: 2000
              })
            }else {
              this.$notify({
                title: 'Error',
                message: res.msg,
                type: 'error',
                duration: 2000
              })
            }
          })

        }
      })
    },
    getActivity(){
      getActivity().then((res) => {
          if (res.status==200){
            this.form =  res.data
          }
      })
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

